<template>
  <div>
<h2>显示页面</h2>
<dev>
  昵称:<input type="text" v-model="queryInfo.name">
  年龄:<input type="text" v-model="queryInfo.age">
  <input type="button" @click="Show"value="查询">
</dev>
<table class="table table-bordered=1">
  <tr>
    <th>ID</th>
    <th>昵称</th>
    <th>联系方式</th>
    <th>年龄</th>
    <th>身份等级</th> 
     <th>可用余额</th>
     <th>可用积分</th>
     <th>状态</th>
     <th>头像</th>
     <th>操作</th>
  </tr>
  <tr v-for="item in list">
    <td>{{ item. id}}</td>
    <td>{{ item. name}}</td>
    <td>{{ item.phone }}</td>
    <td>{{ item.age }}</td>
    <td>{{ item.type }}</td>
    <td>{{ item.pirce }}</td>
    <td>{{ item.jiFen }}</td>
    <td>{{ item.state }}</td>
    <td>
      <img src="../pic/QQ图片20240222105940.jpg" alt="" height="50" width="50">
    </td>
    <td>
      <input type="button" value="修改" >
      <input type="button" value="注销">
      <input type="button" value="删除" @click="update">
    </td>
  </tr>
</table>
  </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import{reactive,toRefs,onMounted}from 'vue'
import { useRoute,useRouter } from 'vue-router';
const routr=useRoute();
const router=useRouter();

let data:any=reactive({
  queryInfo:{
    name:'',
    age:''
  },
  list:[]
})
let {queryInfo,list}=toRefs(data)
onMounted(()=>{
  Show()
})
function Show()
{
  let obj={
    name:queryInfo.value.name,
    age:queryInfo.value.age
  }
  axios({
    url:'/api/Member/GetMembers',
    method:'get',
    params:obj
  })
  .then(res=>{
    list.value=res.data.data
  })
  .catch(err=>{

  })
}
function update()
{
 alert("删除成功")
}
</script>

<style scoped>

</style>